import React,{Fragment} from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import classnames from 'classnames';
import {Icon} from "antd" 

import util from "../../util/ckextraEditorUtil"

let revisionStore = null;
@inject("revisionStore")
@observer
export default class Revision extends React.Component{

  static getCurrentStore = () => {
    return revisionStore;
  }

  componentDidMount() {
    revisionStore = this.props.revisionStore;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.revisionStore.show) {
      document.getElementById("revise").style.display = "block";
    } else {
      document.getElementById("revise").style.display = "none";
    }
  }

  render () {
    const { revisionStore } = this.props;
    const { show, list, avtiveRevisionParams } = revisionStore;
    const revisionParams = toJS(avtiveRevisionParams);

    return (
      <div className="odoc_onlineEdit_revision" style={{display: show ? "block":"none"}}>
        <div className="revise-title">
          <div className="title-name">修订</div>
          <div className="title-number">{list.length}处修订</div>
        </div>
        { 
          show && this.getRevise()
        }
        {Object.keys(revisionParams).length > 0 && (
          <div className="revision-modal" style={{ top: revisionParams.e.clientY + 5, left: revisionParams.e.clientX }}>
            <div className="revision-modal-title">
              {revisionParams.xiudingren}&nbsp;
              {revisionParams.xiudingshijian}&nbsp;
              {revisionParams.typeText}
            </div>
            <div className="revision-modal-content">
              {revisionParams.content}
            </div>
          </div>
        )}
      </div>
    );
  }

  getRevise(){
    const {revisionStore} = this.props;
    const {list,chooseItemId} = revisionStore;
    return toJS(list).map((item)=>{
      let type = "删除的内容";
      if(item.type === "I"){
        type = "插入的内容";
      }
      const time = item.datetime;
      return (
        <div className={classnames('reviseItem', {'reviseItem-active' : chooseItemId === item.id})} key={item.id} onClick={() => revisionStore.choose(item.id) }>
        
          <div className="revise-top">
            <span className="revise-item-name">{item.author}</span>
            <span className="revise-item-type">{type}</span>
            </div>
            <div className="postilTime">{time}</div>
          <div class="revise-bottom">{item.text}</div>
          {
            <Fragment>
              <i className="icon-close" onClick={()=>chooseItemId == item.id && rejectOneRevise()}></i>
              <Icon type="check-circle" onClick={()=>chooseItemId == item.id && receiveOneRevise()}/>
            </Fragment>
          }
          
        </div>
      )
    })
  }
}